<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>生产情况</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/mui.picker.css">
		<link rel="stylesheet" href="../css/mui.poppicker.css">
		<script src="../fonts/iconfont.js"></script>
		<style>
			ul,
			li {
				list-style: none;
				padding: 0;
				margin: 0;
			}
			
			.btn-bar {
				width: 90%;
				margin: 20px auto;
				overflow: hidden;
				border: solid 1.5px #00af66;
				border-radius: 40px;
				height: 40px;
				line-height: 40px;
			}
			
			.btn-bar li {
				float: left;
				width: 33.33%;
				padding-left: 2%;
				box-sizing: border-box;
			}
			
			.btn-bar li a {
				text-align: center;
				text-decoration: none;
				width: 100%;
				display: block;
			}
			
			.btn-bar .current-li a {
				color: #ffffff;
			}
			
			.btn-bar .current-li {
				background: #00af66;
			}
			
			.icon2 {
				/* 通过设置 font-size 来改变图标大小 */
				width: 4.5em;
				height: 3.5em;
				/* 图标和文字相邻时，垂直对齐 */
				vertical-align: -0.22em;
				/* 通过设置 color 来改变 SVG 的颜色/fill */
				fill: currentColor;
				/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
				overflow: hidden;
				color: #666666;
			}
			
			.chart {
				height: 200px;
				margin: 0px;
				padding: 0px;
			}
			
			.icon {
				/* 通过设置 font-size 来改变图标大小 */
				width: 1.5em;
				height: 1.5em;
				/* 图标和文字相邻时，垂直对齐 */
				vertical-align: -0.4em;
				/* 通过设置 color 来改变 SVG 的颜色/fill */
				fill: currentColor;
				/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
				overflow: hidden;
			}
			
			.diy_header {
				width: 100%;
				background: white;
				padding-bottom: 10px;
				border-bottom: 1px solid #cccccc;
				height: 100px;
				position: relative;
				margin-bottom: 20px;
				position: fixed;
				top: 0;
			}
			
			.mui-content {
				margin-top: 100px;
			}
			
			.diy_model {
				
				color: #656565;
				margin-top: 10px;
				line-height: 40px;
			}
			
			.diy_model input {
				color: #ababab;
				display: inline-block;
				width: 70%;
				background: none;
				border: none;
				border-bottom: solid 1px #d7d7d7;
				border-radius: 0;
				line-height: 40px;
				text-align: center;
			}
			
			.photospan {
				color: #ababab;
				display: inline-block;
				width: 60%;
				background: none;
				border: none;
				border-bottom: solid 1px #d7d7d7;
				border-radius: 0;
				text-align: right;
			}
			
			.showtypeli {
				background: #00af66;
			}
			
			.showtypea {
				color: white;
			}
			.tddiv{
				float: left;
				width:33%;
				text-align: center;
			}
		</style>

	</head>

	<body>
		<div class="diy_header">
			<a class="mui-action-back mui-icon" style="padding-left: 1%;width:200px;height:200px;"><span class="mui-icon mui-icon-back" style="color: #333333;font-size: 26px;margin-top: 15px;"></span></a>
			<h3 style="margin: 0;padding: 0;position: absolute;bottom: 20px;padding-left: 3%;color: #333333;">生产情况</h3>

		</div>
		<div id="produceInfo" class="mui-content">
			<!--	<img src="../img/produce.png" width="27%" style="margin-left: 34%;margin-top: 20px;" />-->
			<div style="text-align: center;padding-top: 15px;padding-bottom: 15px;">
				<svg class="icon2" aria-hidden="true">
					<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-shumiao"></use>
				</svg>
			</div>
			<div class="diy_model">
				<span><svg class="icon" aria-hidden="true">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-dingwei"></use>
                    </svg>
				行政区域
				</span>
				<input placeholder="请选择地区" type="text" id="areaPicker" readonly="true" v-model="areaname" />
			</div>
	<!--		<div class="diy_model" onclick="openWin('photos.html')">
				<span><svg class="icon" aria-hidden="true">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-tupian"></use>
                    </svg>
				区域图像
				</span>
				<span class="photospan">
					   <span class="mui-badge">{{photocount}}</span>
				<span class="mui-icon mui-icon-arrowright"></span>
				</span>
			</div>-->

			<div style="padding: 10px 10px;">
				<div id="segmentedControl" class="mui-segmented-control">

					<a class="mui-control-item mui-active" href="#item2">种植情况</a>
					<a class="mui-control-item" href="#item3">养殖情况</a>
				</div>
			</div>
			<div>

				<div id="item2" class="mui-control-content mui-active">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<div class="tddiv" style="font-weight: bold;">产品名称</div>
							<div class="tddiv" style="font-weight: bold;">必采时间</div>
							<div class="tddiv" style="font-weight: bold;">是否销售</div>
						</li>
						
						<li class="mui-table-view-cell" v-for="i in plants" style="overflow-y:scroll;">
							<div class="tddiv">{{i.name}}</div>
							<div class="tddiv">{{i.bcDate}}</div>
							<div class="tddiv">
								{{i.dx>0?'是':'否'}}
							</div>
						</li>
				
					</ul>
				</div>
				<div id="item3" class="mui-control-content">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<div class="tddiv" style="font-weight: bold;">产品名称</div>
							<div class="tddiv" style="font-weight: bold;">出栏时间</div>
							<div class="tddiv" style="font-weight: bold;">是否销售</div>
						</li>
								<li class="mui-table-view-cell" v-for="i in breeds">
							<div class="tddiv">{{i.name}}</div>
							<div class="tddiv">{{i.clDate}}</div>
							<div class="tddiv">{{i.dx>0?'是':'否'}}</div>
						</li>
					</ul>
				</div>
			</div>

		</div>
		<script src="../js/resource/mui.min.js"></script>
		<script src="../js/resource/mui.picker.js"></script>
		<script src="../js/resource/mui.poppicker.js"></script>
		<script src="../js/resource/vue.js"></script>
		<script src="../js/resource/echarts-all.js"></script>
		<script src="../js/resource/axios.js"></script>
		<script src="../js/resource/config.js"></script>
		<script src="../js/produceInfo.js"></script>

		<script>
			(function($, doc) {
				$.init();
				$.ready(function() {

					axios({
						method: 'POST',
						url: sever + '/areajson',
						params: {},
						responseType: 'json',
					}).then(function(result) {
						area = result.data.data
						var _getParam = function(obj, param) {
							return obj[param] || '';
						};

						var cityPicker3 = new $.PopPicker({
							layer: 4
						});
						cityPicker3.setData(area);
						var areaPickerButton = document.getElementById('areaPicker')
							areaPickerButton.addEventListener('tap', function(event) {
								cityPicker3.show(function(items) {
									produceInfo.areaname = _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text') + " " + _getParam(items[3], 'text');
									produceInfo.area = []
									produceInfo.area.push(_getParam(items[0], 'value'))
									produceInfo.area.push(_getParam(items[1], 'value'))
									produceInfo.area.push(_getParam(items[2], 'value'))
									produceInfo.area.push(_getParam(items[3], 'value'))
								});
							}, false);
					})

				});
			})(mui, document);
		</script>
	</body>

</html>